import React, { Component } from 'react'
import { Button, Input } from 'antd'
import { SearchOutlined } from '@ant-design/icons'
import ToolCard from '../../../ComponentsCard/ToolCard'
import './index.css'
import { setCookie } from '../../../Utils/Cookie_'
export default class CampusManagement extends Component {
  state = {
    campusList: [
      {
        campusName: '广东校区',
        campusId: 0,
      },
      {
        campusName: '深圳校区',
        campusId: 1,
      },
      {
        campusName: '广大校区',
        campusId: 2,
      },
      {
        campusName: '哈尔滨校区',
        campusId: 3,
      },
    ],
  }
  changeCampusId = (id) => {
    setCookie({ campusId: id })
  }
  render() {
    const { campusList } = this.state
    return (
      <div className="campus-box">
        {/* 校区选择/title */}
        <div className="campus-header-title">
          <div className="header-name">课程管理</div>
          <div className="header-search">
            <Input
              placeholder="搜索内容"
              prefix={<SearchOutlined style={{ color: '#c4c8cf' }} />}
            />
            <Button style={{ marginLeft: '25px' }} type="primary">
              立即搜索
            </Button>
          </div>
        </div>
        {/* 请求得到的校区列表 */}
        <div className="campus-card-list">
          {campusList.map((item) => (
            <ToolCard
              toObj={
                '/homePage/teachingResearchManagement/campusManagement/ChooseManage'
              }
              beforeClick={() => this.changeCampusId(item.campusId)}
              key={item.campusId}
              cardData={item}
              dataName="campusName"
              dataColor="campusId"
            />
          ))}
          <ToolCard
            cardData={{ name: '添加校区' }}
            dataName="name"
            userDefinedColor={{
              r: 228,
              g: 231,
              b: 237,
            }}
          />
        </div>
      </div>
    )
  }
}
